<template>
    <div style="position: relative;height: 100vh;">
        <!-- 登录界面 -->
        <div style="display: flex;width: 100vw;position: relative;">
            <van-icon name="cross" size="6vw" style="top: 3vw;left: 3vw;" @click="backIndex" />
        </div>
        <!-- logo -->
        <div style="width: 100vw;display: flex;">
            <img src="../../assets/app-logo11.png" alt="" style="width: 300px;margin: auto;">
        </div>
        <div style="width: 100vw;display: flex;flex-wrap: wrap;">
            <div style="margin: auto;">
                <van-cell-group class="zh">
                    <van-field style="width: 100vw;" v-model="uname" label="账号" placeholder="请输入用户名" :left-icon="require(`../../assets/zh.png`)" />
                </van-cell-group>
            </div>
            <div style="margin: auto;">
                <van-cell-group>
                    <van-field style="width: 100vw;" v-model="newPwd" type="password" label="密码" placeholder="请输入新密码" :left-icon="require(`../../assets/mm.png`)" />
                </van-cell-group>
            </div>
            <div style="margin: auto;">
                <van-cell-group>
                    <van-field style="width: 100vw;" v-model="newPwd1" type="password" label="密码" placeholder="请确认新密码" :left-icon="require(`../../assets/mm.png`)" />
                </van-cell-group>
            </div>
        </div>
        <div>
                <van-field
                style="width: 100vw;"
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
                :left-icon="require(`../../assets/yzm.png`)"
                >
                    <template #button>
                        <van-button size="small" color="#f03d37">发送验证码</van-button>
                    </template>
                </van-field>
            </div>
        <div style="margin-top: 30px;display: flex;">
            <button class="login">确认修改</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                uname: '',
                newPwd: '',
                newPwd1: '',
                checked: false,
                sms:'',
                
            }
        },
        methods: {
            backIndex() {
                this.$router.push('/home/index')
            },
            returnRegister(){
                this.$router.push('/register')
            },
            
        },
    }
</script>

<style lang="scss" scoped>
.login {
    color: #fff;
    background-color: #f03d37;
    width: 80%;
    height: 5vh;
    margin: auto;
    border-radius: 20px;
    border: none;
}
</style>